<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>管理</title>
    <link rel="stylesheet" href="/stylesheets/admin.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <div class="header-content">
          <h1>管理</h1>
        </div>
      </header>

      <!-- 广告展示开关 -->
      <div class="card">
        <div class="card-title">广告管理</div>
        <div class="toggle-group">
          <label class="toggle-label">广告展示</label>
          <label class="switch">
            <input type="checkbox" id="adToggle" />
            <span class="slider round"></span>
          </label>
          <span id="adStatus">已关闭</span>
        </div>
      </div>

      <!-- 回传项 -->
      <div class="card">
        <div class="card-title">回传控制</div>
        <div class="toggle-group">
          <label class="toggle-label">广告次数后回传</label>
          <label class="number">
            <input type="number" id="adCount" />
          </label>
        </div>
      </div>

      <!-- 广告初始项 -->
      <div class="card">
        <div class="card-title">广告初始项</div>
        <div class="checkbox-group">
          <label class="checkbox-label">
            <input type="checkbox" name="adInitial" value="banner" />
            <span class="checkmark"></span>
            Banner 横幅
          </label>
          <label class="checkbox-label">
            <input type="checkbox" name="adInitial" value="interstitial" />
            <span class="checkmark"></span>
            Interstitial 插屏
          </label>
          <label class="checkbox-label">
            <input type="checkbox" name="adInitial" value="video" />
            <span class="checkmark"></span>
            Video 视频
          </label>
        </div>
        <button id="saveInitialAd" class="save-btn">保存设置</button>
      </div>

      <!-- 反复控制项 -->
      <div class="card">
        <div class="card-title">反复控制项</div>
        <div class="checkbox-group">
          <label class="checkbox-label">
            <input type="checkbox" name="adRepeat" value="banner" />
            <span class="checkmark"></span>
            Banner 横幅
          </label>
          <label class="checkbox-label">
            <input type="checkbox" name="adRepeat" value="interstitial" />
            <span class="checkmark"></span>
            Interstitial 插屏
          </label>
          <label class="checkbox-label">
            <input type="checkbox" name="adRepeat" value="video" />
            <span class="checkmark"></span>
            Video 视频
          </label>
        </div>
        <button id="saveRepeatAd" class="save-btn">保存设置</button>
      </div>

      <div class="card">
        <div class="card-title">循环控制项</div>
        <div class="checkbox-group">
          <label class="checkbox-label">
            <input type="checkbox" name="adInfinityShow" value="banner" />
            <span class="checkmark"></span>
            Banner 横幅
          </label>
          <label class="checkbox-label">
            <input type="checkbox" name="adInfinityShow" value="interstitial" />
            <span class="checkmark"></span>
            Interstitial 插屏
          </label>
          <label class="checkbox-label">
            <input type="checkbox" name="adInfinityShow" value="video" />
            <span class="checkmark"></span>
            Video 视频
          </label>
        </div>
        <button id="saveInfinityShowAd" class="save-btn">保存设置</button>
        <div class="card-title">延迟时间</div>
        <input
          type="number"
          id="infinityShowDelay"
          placeholder="请输入延迟时间（毫秒）"
        />
        <button id="saveInfinityShowDelay" class="save-btn">保存设置</button>
      </div>

      <!-- 添加地区 -->
      <div class="card">
        <div class="card-title">添加新地区</div>
        <div class="form-group">
          <label for="locationName">地区名称</label>
          <input type="text" id="locationName" placeholder="请输入地区名称" />
        </div>
        <button id="addLocation">添加地区</button>
      </div>

      <!-- 地区列表 -->
      <div class="card">
        <div class="card-title">
          地区列表
          <span id="locationsCount">共0个地区</span>
        </div>

        <ul class="locations-list" id="locationsList">
          <li class="empty-state">
            <svg
              width="64"
              height="41"
              viewBox="0 0 64 41"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
                <ellipse
                  fill="#F5F5F5"
                  cx="32"
                  cy="33"
                  rx="32"
                  ry="7"
                ></ellipse>
                <g fill-rule="nonzero" stroke="#D9D9D9">
                  <path
                    d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                  ></path>
                  <path
                    d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                    fill="#FAFAFA"
                  ></path>
                </g>
              </g>
            </svg>
            <p>暂无地区数据，请添加新地区</p>
          </li>
        </ul>
      </div>
    </div>
    <script src="/javascripts/axios.min.js"></script>
    <script src="/javascripts/admin.js"></script>
  </body>
</html>
